<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>订单详情</title>
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/style.css" rel="stylesheet"/>
  <!--对话框-->
  <link rel="stylesheet" href="/static/js/jconfirm/jquery-confirm.min.css">
</head>
<body>
<input type="text" class="hidden" th:value="${#httpServletRequest.getAttribute('order_id')}" id="order_id">
<input type="text" class="hidden" th:value="${#httpServletRequest.getAttribute('order_status')}" id="order_status">
<input type="text" class="hidden" th:value="${#httpServletRequest.getAttribute('dId')}" id="driverId">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-12" style="text-align: center; height: 50px"><h3 id="title"></h3></div>
      </div>
      <div class="row" id="driver_info" style="background-color: #eeeeee; margin-bottom: 15px">
        <div class="col-xs-3">
          <img src="#" alt="" id="driver_img" style="width:50px; height:50px; border-radius:25px">
        </div>
        <div class="col-xs-9">
          <div class="row">
            <div class="col-xs-4" id="driver_name">-</div>
          </div>
          <div class="row">
            <div class="col-xs-4" id="driver_phone">-</div>
          </div>
        </div>
      </div>
      <div class="row" style="background-color: #eeeeee; margin-bottom: 15px">
        <div class="col-xs-12">
          <div class="row" style="margin-bottom: 10px">
            <div class="col-xs-12" id="appointmentTime"></div>
          </div>
          <div class="row" style="margin-bottom: 10px">
            <div class="col-xs-12">
              <p class="aui-order-fl aui-order-address" id="startPoint"></p>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <p class="aui-order-fl aui-order-door" id="endPoint"></p>
            </div>
          </div>
        </div>
      </div>
      <hr>
      <div class="row" style="background-color: #eeeeee; margin-bottom: 15px">
        <div class="col-xs-12">
          <div class="row" style="margin-bottom: 5px">
            <div class="col-xs-3">订单号</div>
            <div class="col-xs-9" id="id">-</div>
          </div>
          <div class="row" style="margin-bottom: 5px">
            <div class="col-xs-3">订单车型</div>
            <div class="col-xs-9" id="carType">-</div>
          </div>
          <div class="row hidden" style="margin-bottom: 5px">
            <div class="col-xs-3">车牌号</div>
            <div class="col-xs-9" id="licence">-</div>
          </div>
          <div class="row hidden" style="margin-bottom: 5px">
            <div class="col-xs-3">客户姓名</div>
            <div class="col-xs-9" id="c_name">-</div>
          </div>
          <div class="row" style="margin-bottom: 5px">
            <div class="col-xs-3">联系电话</div>
            <div class="col-xs-9" id="c_phone">-</div>
          </div>
          <div class="row" style="margin-bottom: 5px">
            <div class="col-xs-3">备注</div>
            <div class="col-xs-9" id="remark">-</div>
          </div>
        </div>
      </div>
      <div class="row" style="background-color: #eeeeee; margin-bottom: 15px">
        <div class="col-xs-3">订单价格</div>
        <div class="col-xs-6" id="order_price"></div>
        <div class="col-xs-3">
          <a data-toggle="collapse" href="#collapsePriceDetail" aria-expanded="false"
             aria-controls="collapsePriceDetail">
            <small class="text-primary">费用明细</small>
          </a>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="collapse m-t-10" id="collapsePriceDetail">
            <div class="well">
              <div class="row">
                <div class="col-xs-4">价格类型</div>
                <div class="col-xs-4">价格标准</div>
                <div class="col-xs-4">您的费用</div>
              </div>
              <div class="row" id="startPrice">
                <div class="col-xs-4">起步价(5公里)：</div>
                <div class="col-xs-4"><strong>-</strong> 元</div>
                <div class="col-xs-4"><strong>-</strong> 元</div>
              </div>
              <div class="row" id="priceBetween5And25">
                <div class="col-xs-4">分段价(5~25公里)：</div>
                <div class="col-xs-4"><strong>-</strong> 元/公里</div>
                <div class="col-xs-4"><strong>-</strong> 元</div>
              </div>
              <div class="row" id="priceBetween25And60">
                <div class="col-xs-4">分段价(25~60公里)：</div>
                <div class="col-xs-4"><strong>-</strong> 元/公里</div>
                <div class="col-xs-4"><strong>-</strong> 元</div>
              </div>
              <div class="row" id="priceGt60">
                <div class="col-xs-4">分段价(大于60公里)：</div>
                <div class="col-xs-4"><strong>-</strong> 元/公里</div>
                <div class="col-xs-4"><strong>-</strong> 元</div>
              </div>
              <div class="row">
                <div class="col-xs-4">总计：</div>
                <div class="col-xs-offset-4 col-xs-4"><strong class="text-danger" id="total_price">-</strong> 元</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <br>
      <div class="row hidden" style="background-color: #eeeeee; margin-bottom: 15px">
        <div class="col-xs-3">您的收入</div>
        <div class="col-xs-8" id="driver_price">-</div>
      </div>
      <div class="row">
        <div class="col-xs-12 hidden" id="cancelDiv">
          <button type="button" class="btn btn-default btn-block">取消订单</button>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 hidden" id="acceptDiv">
          <button type="button" class="btn btn-default btn-block">接受订单</button>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 hidden" id="completeOrderDiv">
          <button type="button" class="btn btn-default btn-block">完成订单</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/static/js/lightyear.js"></script>
<!--对话框-->
<script src="/static/js/jconfirm/jquery-confirm.min.js"></script>
<script src="/static/js/mycommons.js"></script>
<script>
  let order_id = '', driverId, percentage, order_price
  $(function () {
    order_id = $("#order_id").val()
    let order_status = $("#order_status").val()
    driverId = $("#driverId").val()

    $.get("/wx/customer/order/" + order_id, {status: order_status}, function (res) {
      if (res) {
        //根据状态改变标题和切换取消订单按钮
        if (order_status === '0') {
          $("#title").text("待接单")
          $("#driver_info").addClass("hidden")
          if (driverId !== '') {
            $("#c_name").parent("div").removeClass("hidden")
            $("#acceptDiv").removeClass("hidden")
          } else {
            $("#cancelDiv").removeClass("hidden")
          }
        } else if (order_status === '1') {
          $("#title").text("进行中")
          $("#driver_info").removeClass("hidden")
          $("#licence").parent("div").removeClass("hidden")
          if (driverId !== '') {
            $("#c_name").parent("div").removeClass("hidden")
            $("#completeOrderDiv").removeClass("hidden")
          }
        } else if (order_status === '2') {
          $("#title").text("已完成")
          $("#driver_info").removeClass("hidden")
          $("#licence").parent("div").removeClass("hidden")
          if (driverId !== '') {
            $("#c_name").parent("div").removeClass("hidden")
            $("#driver_price").parent("div").removeClass("hidden")
          }
        } else if (order_status === '3') {
          $("#title").text("已取消")
          $("#driver_info").addClass("hidden")
        }

        let order = res.data
        if (order.driver != null) {
          $("#driver_img").attr("src", "/static/driver_pic/" + order.driver.pic)
          $("#driver_name").text(order.driver.name)
          $("#driver_phone").text(order.driver.phone)
        }

        $("#appointmentTime").text(formatTimeObj(order.appointmentTime))
        $("#startPoint").text(order.startPoint)
        $("#endPoint").text(order.endPoint)
        $("#id").text(order_id)
        $("#carType").text(order.carType.name)
        $("#licence").text(order.car.licence)
        $("#c_name").text(order.customer.name)
        $("#c_phone").text(order.customer.phone)
        $("#remark").text(order.remark)
        $("#order_price").text(order.price)
        order_price = order.price

        let distance = order.distance
        $.get("/wx/rule", {typeId: order.carType.id}, function (res) {
          if (res.flag) {
            let ruleVo = res.data
            $("#startPrice strong:eq(0)").text(ruleVo.startPrice)
            $("#priceBetween5And25 strong:eq(0)").text(ruleVo.priceBetween5And25)
            $("#priceBetween25And60 strong:eq(0)").text(ruleVo.priceBetween25And60)
            $("#priceGt60 strong:eq(0)").text(ruleVo.priceGt60)
            $("#total_price").text(order.price)
            percentage = ruleVo.percentage
            $("#driver_price").text(order_price * (100 - percentage) / 100)

            $("#startPrice strong:eq(1)").text(ruleVo.startPrice)
            if (5 <= distance && distance <= 25) {
              $("#priceBetween5And25 strong:eq(1)").text((distance - 5) * ruleVo.priceBetween5And25)
            } else if (distance <= 60) {
              $("#priceBetween5And25 strong:eq(1)").text(20 * ruleVo.priceBetween5And25)
              $("#priceBetween25And60 strong:eq(1)").text((distance - 25) * ruleVo.priceBetween25And60)
            } else if (distance > 60) {
              $("#priceBetween5And25 strong:eq(1)").text(20 * ruleVo.priceBetween5And25)
              $("#priceBetween25And60 strong:eq(1)").text(35 * ruleVo.priceBetween25And60)
              $("#priceGt60 strong:eq(1)").text((distance - 60) * ruleVo.priceGt60)
            }
          }
        })
      }
    })
  })

  //格式化订单显示时间
  function formatTimeObj(datetime) {
    let nowYear = new Date().getFullYear()
    let year = datetime.year
    let month = datetime.monthValue.toString().padStart(2, '0')
    let day = datetime.dayOfMonth.toString().padStart(2, '0')
    let hour = datetime.hour.toString().padStart(2, '0')
    let minute = datetime.minute.toString().padStart(2, '0')
    //如果是今年的订单，则不显示年份
    if (year === nowYear) {
      return month + "月" + day + "日 " + hour + ":" + minute
    } else {
      return year + "年" + month + "月" + day + "日 " + hour + ":" + minute
    }
  }

  //取消订单
  $("#cancelDiv button").click(function () {
    $.confirm({
      title: '提示',
      content: '您确认取消该订单吗？',
      type: 'orange',
      typeAnimated: true,
      buttons: {
        confirm: {
          text: '确认',
          btnClass: 'btn-primary',
          action: function () {
            //发送ajax请求
            $.ajax({
              url: "/wx/customer/order/" + order_id,
              type: "PUT",
              success: function (res) {
                if (res.flag) {
                  $("#title").html("已取消")
                  $("#cancelDiv").addClass("hidden")
                  msgNotify(res.msg, 'success', 1500)
                }
              }
            })
          }
        },
        cancel: {
          text: '取消',
          action: function () {
          }
        }
      }
    })
  })

  //司机接受订单
  $("#acceptDiv button").click(function () {
    $.ajax({
      url: "/wx/driver/order/" + order_id,
      type: 'PUT',
      data: {dId: driverId, status: 1},
      success(res) {
        if (res.flag) {
          msgNotify(res.msg, 'success', 1500)
          $("#title").text("进行中")
          $("#acceptDiv").addClass("hidden")
          $("#completeOrderDiv").removeClass("hidden")
        } else {
          msgNotify(res.msg, 'danger', 1500)
        }
      }
    })
  })

  //司机完成订单
  $("#completeOrderDiv button").click(function () {
    $.ajax({
      url: '/wx/driver/order/'+order_id,
      type: 'PUT',
      data: {dId: driverId, status: 2},
      success(res) {
        if (res.flag) {
          msgNotify(res.msg, 'success', 1500)
          $("#title").text("已完成")
          $("#driver_price").parent("div").removeClass("hidden")
          $("#completeOrderDiv").addClass("hidden")
        } else {
          msgNotify(res.msg, 'error', 1500)
        }
      }
    })
  })
</script>
</body>
</html>